import React, {Component} from 'react';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import CircularProgress from 'material-ui/CircularProgress';
import Snackbar from 'material-ui/Snackbar';
import Divider from 'material-ui/Divider';
import Wrapper from '../Welcome/Wrapper';
import BOXSTYLE from './BOXSTYLE';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actionCreators from '../../redux/actions/LoginAc';

import { Styles } from '../../styles';

class Login extends Component {
  constructor(props) {
    super(props);
    const redirectRoute = this.props.location.query.next || '/home';
    this.state = {
      phone: null,
      password: null,
      redirectTo: redirectRoute,
    }
  }

  componentDidMount() {
    document.addEventListener('keydown', this.handleOnKeyDown, false);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleOnKeyDown, false);
  }

  login() {
    this.props.actions.login(this.state.phone, this.state.password, this.state.redirectRoute);
  }

  handleRequestCloseSnackbar() {
    this.props.actions.clearError();
  }

  /**
   * 绑定键盘的enter键
   */
  handleOnKeyDown = (event) => {
    if (event.keyCode === 13) {
      this.login();
    }
  };

  render() {
  	return (
      <Wrapper>
        <Link to={`/reset`} className={Styles['welcome-a']} style={BOXSTYLE.a}>忘记密码 ?</Link>
        <Paper style={BOXSTYLE.box}>
          <TextField
            fullWidth={true}
            hintText="手机号码"
            hintStyle={BOXSTYLE.hintStyle}
            underlineShow={false}
            onChange={(e, v) => this.setState({phone: v})}
          />
          <Divider />
          <TextField
            fullWidth={true}
            hintText="密码"
            hintStyle={BOXSTYLE.hintStyle}
            underlineShow={false}
            type="password"
            onChange={(e, v) => this.setState({password: v})}
          />
        </Paper>
        <RaisedButton 
          style={BOXSTYLE.btn}
          fullWidth={true}
          label={this.props.isAuthenticating ? '' : '登录'}
          primary={true}
          onClick={this.login.bind(this)}
          children={this.props.isAuthenticating 
            ? <CircularProgress 
              style={{margin: 6}} 
              size={24} 
              color="#fff"/> 
            : ''
          }
        />
        <Link to={`/register/`}>
          <FlatButton 
            style={{width: '100%'}}
            label="or 立即注册" 
            primary={true} 
          />
        </Link>
        <Snackbar
          open={this.props.openSnackbar}
          message={this.props.statusText || ''}
          autoHideDuration={4000}
          onRequestClose={this.handleRequestCloseSnackbar.bind(this)}
        />
      </Wrapper>
  	);
  }
};

const mapStateToProps = (state) => ({
  isAuthenticating: state.login.isAuthenticating,
  statusText: state.login.statusText,
  openSnackbar: state.login.openSnackbar
});

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(actionCreators, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);
